<script setup lang="ts">
import { getGoodsDetail } from "@/api/basicArchives/goods";
import { DictSelect } from "@/components/common/DictSelect";
import { FileUpload } from "@/components/common/FileUpload";
import WangEditor from "@/components/common/WangEditor";
import { addDialog } from "@/components/ReDialog";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { dealDataExcept, dealDataRide } from "@/utils/common";
import { clearNoNum, clearSuffix } from "@/utils/inupt";
import { message } from "@/utils/message";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { cloneDeep } from "@pureadmin/utils";
import "@wangeditor/editor/dist/css/style.css";
import { computed, h, nextTick, onMounted, ref } from "vue";
import { useColumns } from "../utils/columns";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { SetBrandPrice } from "./components";

const { ruleColumns, feeColumns } = useColumns();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    title: "新增",
    titlePre: "菜单",
    parentId: 0,
    menuName: "",
    menuIcon: "",
    menuCode: "",
    menuType: 1,
    menuUri: "",
    preStockStatus: 1,
    inputBraCodeList: [],
    goodsExchangeFareRuleList: [],
    goodsSpecList: [],
    selectData: {}
  }),
  selectData: null
});

const ruleFormRef = ref();
const formLoading = ref(false);
const newForm = ref(props.formInline);

/** 左侧导航 */
const containerRef = ref<HTMLElement | null>(null);
const handleClick = (e: MouseEvent) => {
  e.preventDefault();
};
const handleScroll = event => {
  if (event.target.scrollTop <= 1) {
    // event.preventDefault();
    containerRef.value.scrollTop = 1;
  }
};

// 商品规格 =========================================
const brandPriceRef = ref();
const goodsSpecList = ref([]);
const masterBrandList = ref([]);
const setBrandPriceRef = ref();
let delSpecIds = []; // 删除的规格id

function dealGoodsPriceObj(item) {
  return {
    bizType: 1,
    bizId: item.id,
    discountSalePrice: "",
    discountScore: "",
    goodsStatus: 0,
    score: "",
    storeBuyPrice: "",
    storeSalePrice: ""
  };
}

// 新增规格
const ruleTableAdd = () => {
  let ruleData = {
    id: "",
    specId: "",
    tableId: goodsSpecList.value.length + 1,
    specName: "",
    buyPrice: "",
    barCode: "",
    brandPriceList: props.selectData.brandList,
    inputBraCodeList: [{ code: "" }],
    goodsSpecBrandRelList: [] // 保存数据库的数据
  };
  // 判断是否是首次添加
  if (goodsSpecList.value.length == 0) {
    ruleData.id = newForm.value.specId;
    ruleData.specId = newForm.value.specId;
    ruleData.specName = "主规格";
    ruleData.buyPrice = newForm.value.buyPrice;
    ruleData.barCode = newForm.value.barCode;
    ruleData.brandPriceList = brandPriceRef.value.getShowBrandPriceList();
    ruleData.inputBraCodeList = newForm.value.inputBraCodeList;
    ruleData.goodsSpecBrandRelList =
      brandPriceRef.value.getSaveBrandPriceList().goodsSpecBrandRelList;
  } else {
    ruleData.goodsSpecBrandRelList = props.selectData.brandList.map(v => {
      return dealGoodsPriceObj(v);
    });
  }
  goodsSpecList.value.push(ruleData);
};

// 修改规格
const changBrandGoods = row => {
  let oriBrandGoodsData = JSON.parse(JSON.stringify(row.brandPriceList));
  addDialog({
    title: "关联品牌",
    props: {
      brandPriceList: row.brandPriceList || []
    },
    width: "1000px",
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(SetBrandPrice, { ref: setBrandPriceRef }),
    beforeSure: done => {
      let saveBrandPriceData = setBrandPriceRef.value.getSaveBrandPriceList();
      if (saveBrandPriceData.isCanNext) {
        row.goodsSpecBrandRelList = saveBrandPriceData.goodsSpecBrandRelList;
        row.brandPriceList = setBrandPriceRef.value.getShowBrandPriceList();
        done();
      }
    },
    beforeCancel: done => {
      row.brandPriceList = oriBrandGoodsData;
      done();
    }
  });
};

// 删除规格
const ruleTableDel = row => {
  const index = goodsSpecList.value.indexOf(row);
  if (index !== -1) {
    // 记录删除的规格id
    if (row.id && !delSpecIds.includes(row.id)) {
      delSpecIds.push(row.id);
    }
    // 最后一个赋值页面表单值
    if (goodsSpecList.value.length == 1) {
      masterBrandList.value = goodsSpecList.value[0].brandPriceList;
      newForm.value.specId = goodsSpecList.value[0].specId;
      newForm.value.barCode = goodsSpecList.value[0].barCode;
      newForm.value.buyPrice = goodsSpecList.value[0].buyPrice;
      newForm.value.inputBraCodeList = goodsSpecList.value[0].inputBraCodeList;

      // 最后一个规格不进行删除
      if (row.id) {
        let index = delSpecIds.findIndex(v => v == row.id);
        if (index != -1) {
          delSpecIds.splice(index, 1);
        }
      }
    }
    goodsSpecList.value.splice(index, 1);
  }
};

// 兑换规则  =========================================

const feeTableAdd = () => {
  newForm.value.goodsExchangeFareRuleList.push({
    id: newForm.value.goodsExchangeFareRuleList.length + 1,
    province: "",
    fareScore: "",
    farePrice: ""
  });
};

const feeTableDel = row => {
  const index = newForm.value.goodsExchangeFareRuleList.indexOf(row);
  if (index !== -1) newForm.value.goodsExchangeFareRuleList.splice(index, 1);
};

const dealBrandList = propList => {
  // bizType	业务类型 1品牌 0门店
  let brandGoodsPrice = [];
  let storeGoodsPrice = [];
  let goodsSpecBrandRelList = propList || [];
  goodsSpecBrandRelList.forEach(v => {
    v.id = v.bizId;
    v.discountSalePrice = dealDataExcept(v.discountSalePrice);
    v.storeBuyPrice = dealDataExcept(v.storeBuyPrice);
    v.storeSalePrice = dealDataExcept(v.storeSalePrice);
    v.score = dealDataExcept(v.score);
    v.discountScore = dealDataExcept(v.discountScore);
    if (v.bizType == 1) {
      // 品牌
      v.brandName =
        props.selectData.brandList.find(i => i.bizId == v.bizId)?.brandName ||
        "--";
      brandGoodsPrice.push(v);
    } else {
      // 门店
      let obj = props.selectData.storeList.find(i => i.id == v.bizId);
      if (obj) {
        v.brandId = obj.brandId;
        v.brandName = obj.storeName;
      }
      storeGoodsPrice.push(v);
    }
  });

  return brandGoodsPrice.map(v => {
    // 处理门店
    v.storeList = storeGoodsPrice.filter(i => i.brandId == v.bizId);
    return v;
  });
};

// 获取详情
const loadGoodsDetail = async id => {
  formLoading.value = true;

  // 处理返回的值显示
  let { data } = await getGoodsDetail(id);
  delete data.labelList;
  delete data.createUserId;
  delete data.createUserName;
  delete data.gmtCreate;
  delete data.gmtModified;
  delete data.goodsCode;
  data.goodsDetail = data.goodsDetail || "";

  // 规则、品牌的回显
  let tempGoodsSpecList = data.goodsSpecList || [];
  if (tempGoodsSpecList.length == 1) {
    // 主规格的处理
    let goodsSpecObj = tempGoodsSpecList[0];
    data.specId = goodsSpecObj.id;

    // 辅助条码
    let tempVraCodeList = [{ code: "" }];
    if (
      goodsSpecObj.auxiliaryBraCodeList &&
      goodsSpecObj.auxiliaryBraCodeList.length > 0
    ) {
      tempVraCodeList = goodsSpecObj.auxiliaryBraCodeList.map(v => {
        return {
          code: v
        };
      });
    }
    data.inputBraCodeList = tempVraCodeList;

    data.barCode = goodsSpecObj.barCode;
    data.buyPrice = dealDataExcept(goodsSpecObj.buyPrice);
    masterBrandList.value = dealBrandList(goodsSpecObj.goodsSpecBrandRelList);
  } else {
    // 多规格处理
    goodsSpecList.value = tempGoodsSpecList.map(v => {
      v.buyPrice = dealDataExcept(v.buyPrice);
      v.specId = v.id;
      // 辅助条码
      let tempVraCodeList = [{ code: "" }];
      if (v.auxiliaryBraCodeList && v.auxiliaryBraCodeList.length > 0) {
        tempVraCodeList = v.auxiliaryBraCodeList.map(v => {
          return {
            code: v
          };
        });
      }
      v.inputBraCodeList = tempVraCodeList;

      // 品牌集合
      if (v.goodsSpecBrandRelList) {
        v.brandPriceList = dealBrandList(cloneDeep(v.goodsSpecBrandRelList));
      } else {
        v.goodsSpecBrandRelList = [];
        v.brandPriceList = [];
      }

      return v;
    });
  }
  delete data.goodsSpecList;

  data.recommendIndex = dealDataExcept(data.recommendIndex, 10) || 0;
  data.goodsExchangeFareRuleList = data.goodsExchangeFareRuleList.map(v => {
    return {
      province: v.province,
      fareScore: dealDataExcept(v.fareScore),
      farePrice: dealDataExcept(v.farePrice)
    };
  });

  data.ruleId = data.ruleId || "";
  newForm.value = Object.assign(newForm.value, data);
  formLoading.value = false;
};

// 校验是否可以进行下一步操作
const isCanNext = async () => {
  console.log("form---1");
  // 检查表单
  let formValid = true;
  await ruleFormRef.value.validate(valid => (formValid = valid));
  console.log("form---2", formValid);
  if (!formValid) {
    return false;
  }

  console.log("form---3");

  // 校验兑换运费规则
  let tempList = newForm.value.goodsExchangeFareRuleList || [];
  if (tempList.length > 0) {
    for (let index = 0; index < tempList.length; index++) {
      const item = tempList[index];
      if (!item.province || !item.fareScore || !item.farePrice) {
        message(
          `兑换运费规则第${index + 1} 条数据省份、运费积分、运费金额均不可为空!`,
          { type: "warning" }
        );
        console.log("form---4");
        return false;
      }
    }
  }

  // 校验品牌
  let tempGoodsSpecList = [];
  if (goodsSpecList.value.length <= 0) {
    // 主规格
    let saveBrandPriceData = brandPriceRef.value.getSaveBrandPriceList();
    if (!saveBrandPriceData.isCanNext) {
      return false;
    }

    tempGoodsSpecList = [
      {
        id: newForm.value.specId || "",
        specName: "",
        barCode: newForm.value.barCode,
        buyPrice: dealDataRide(newForm.value.buyPrice),
        auxiliaryBraCodeList: newForm.value.inputBraCodeList
          .filter(v => v.code)
          .map(v => v.code),
        isMaster: 1,
        goodsSpecBrandRelList: saveBrandPriceData.goodsSpecBrandRelList
      }
    ];
  } else {
    // 多规格
    let newGoodsSpecList = cloneDeep(goodsSpecList.value);
    for (let index = 0; index < newGoodsSpecList.length; index++) {
      const v = newGoodsSpecList[index];
      if (!v.specName || !v.buyPrice) {
        message(`商品规格第${index + 1} 条数据规格名称、商品进价均不可为空!`, {
          type: "warning"
        });
        console.log("form---5");
        return false;
      }

      if (v.goodsSpecBrandRelList.length <= 0) {
        message(`商品规格第${index + 1} 条数据关联品牌未进行编辑!`, {
          type: "warning"
        });
        return false;
      }
      v.id = v.specId || "";
      v.isMaster = 0;
      v.buyPrice = dealDataRide(v.buyPrice);
      v.auxiliaryBraCodeList = v.inputBraCodeList
        .filter(v => v.code)
        .map(v => v.code);
      delete v.brandPriceList;
      delete v.tableId;
      delete v.inputBraCodeList;
      tempGoodsSpecList.push(v);
    }

    // 判断是否只有一个规格
    if (tempGoodsSpecList.length == 1) {
      tempGoodsSpecList[0].specName = "";
      tempGoodsSpecList[0].isMaster = 1;
    }
  }
  console.log("tempGoodsSpecList", tempGoodsSpecList);
  console.log("delSpecIds", delSpecIds);
  newForm.value.goodsSpecList = tempGoodsSpecList;
  newForm.value.delSpecIds = delSpecIds;
  newForm.value.ruleId = newForm.value.ruleId || 0;
  console.log("form---6");
  return true;
};

onMounted(async () => {
  delSpecIds = [];
  if (newForm.value.id) {
    loadGoodsDetail(newForm.value.id);
  } else {
    masterBrandList.value = cloneDeep(props.selectData.brandList || []);
    newForm.value.goodsExchangeFareRuleList = [];
    newForm.value.inputBraCodeList = [{ code: "" }];
  }
  nextTick(() => {
    containerRef.value.scrollTop = 2;
  });
});

function getRef() {
  return ruleFormRef.value;
}

// 商品类目
const categoryList = computed(() => {
  let treeList = [];
  if (newForm.value.goodsType) {
    treeList = props.selectData.categoryList.filter(
      v => v.type == newForm.value.goodsType
    );
    // newForm.value.categoryId = "";
  }
  return treeList;
});

defineExpose({ getRef, isCanNext });
</script>

<template>
  <div class="goods-box">
    <div class="goods-step">
      <el-anchor
        :container="containerRef"
        direction="vertical"
        type="default"
        :offset="10"
        @click="handleClick"
      >
        <el-anchor-link href="#base" title="基本信息" />
        <el-anchor-link href="#rule" title="商品规格" />
        <!-- <el-anchor-link href="#brand" title="商品品牌" /> -->
        <el-anchor-link href="#detail" title="商品详情" />
      </el-anchor>
    </div>
    <div
      ref="containerRef"
      v-loading="formLoading"
      class="goods-base"
      @scroll.passive="handleScroll"
    >
      <!-- 基本信息 -->
      <div id="base" class="base-item">
        <div class="b-title">基本信息</div>
        <div class="b-content">
          <el-form
            ref="ruleFormRef"
            :model="newForm"
            :rules="formRules"
            label-width="95px"
            class=""
          >
            <el-form-item label="商品名称" prop="goodsName">
              <el-input
                v-model="newForm.goodsName"
                class="!w-[300px]"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="商品主图" prop="imageJson">
              <FileUpload
                v-model="newForm.imageJson"
                :fileType="['jpg', 'jpeg', 'png']"
                :limit="15"
                :maxSize="2"
                tips="第一张图片为主图，建议尺寸：600*600，大小不超过2M，建议格式png、jpeg、jpg"
              />
            </el-form-item>
            <el-form-item label="商品类型" prop="goodsType">
              <DictSelect
                v-model="newForm.goodsType"
                class="!w-[300px]"
                dict-type="PRODUCT_TYPE"
                @change="newForm.categoryId = ''"
              />
            </el-form-item>
            <el-form-item label="商品类目" prop="categoryId">
              <el-tree-select
                v-model="newForm.categoryId"
                class="!w-[300px]"
                default-expand-all
                node-key="id"
                :data="categoryList"
                :props="{ children: 'children', label: 'categoryName' }"
              />
            </el-form-item>
            <el-form-item label="关联供应商" prop="supplierId">
              <el-select
                v-model="newForm.supplierId"
                clearable
                filterable
                placeholder="请选择"
                class="!w-[300px]"
              >
                <el-option
                  v-for="item in props.selectData.supplierList"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="newForm.goodsType == 2"
              label="预备货"
              prop="preStockStatus"
            >
              <el-radio-group v-model="newForm.preStockStatus">
                <el-radio :value="1">是</el-radio>
                <el-radio :value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="goodsSpecList.length <= 0">
              <el-form-item label="商品条码" prop="barCode">
                <el-input
                  v-model="newForm.barCode"
                  class="!w-[300px]"
                  clearable
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="辅助条码" prop="inputBraCodeList">
                <div class="!w-[300px]">
                  <div
                    v-for="(item, index) in newForm.inputBraCodeList"
                    :key="index"
                    class="flex items-center"
                    :class="
                      index == newForm.inputBraCodeList.length - 1
                        ? ''
                        : 'mb-[15px]'
                    "
                  >
                    <el-input
                      v-model="item.code"
                      class="mr-[10px] flex-1"
                      clearable
                      placeholder="请输入"
                    />
                    <IconifyIconOffline
                      v-if="index != 0"
                      class="text-red-500 cursor-pointer mr-[8px]"
                      :icon="Delete"
                      @click="newForm.inputBraCodeList.splice(index, 1)"
                    />
                    <IconifyIconOffline
                      class="cursor-pointer"
                      :icon="AddFill"
                      @click="newForm.inputBraCodeList.push({ code: '' })"
                    />
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="商品进价" prop="buyPrice">
                <el-input
                  v-model="newForm.buyPrice"
                  class="!w-[300px]"
                  clearable
                  placeholder="请输入"
                  @input="newForm.buyPrice = clearNoNum($event)"
                  @blur="newForm.buyPrice = clearSuffix(newForm.buyPrice)"
                >
                  <template #suffix>元</template>
                </el-input>
              </el-form-item>
            </template>

            <el-form-item label="商品标签" prop="labelIds">
              <el-tree-select
                v-model="newForm.labelIds"
                class="!w-[300px]"
                default-expand-all
                multiple
                clearable
                node-key="id"
                :collapse-tags="newForm.labelIds && newForm.labelIds.length > 5"
                :data="props.selectData.labelList"
              />
            </el-form-item>
            <el-form-item label="计量单位" prop="unitItemId">
              <el-tree-select
                v-model="newForm.unitItemId"
                class="!w-[300px]"
                default-expand-all
                node-key="id"
                :data="props.selectData.unitItemlList"
              />
            </el-form-item>
            <el-form-item
              v-if="newForm.goodsType == 2"
              label="起订量"
              prop="orderMin"
            >
              <el-input
                v-model="newForm.orderMin"
                class="!w-[300px]"
                clearable
                placeholder="请输入"
                @input="newForm.orderMin = clearNoNum($event)"
                @blur="newForm.orderMin = clearSuffix(newForm.orderMin)"
              />
            </el-form-item>
            <el-form-item label="推荐指数" prop="recommendIndex">
              <el-rate v-model="newForm.recommendIndex" />
            </el-form-item>

            <template v-if="newForm.goodsType == 2">
              <el-form-item label="为你推荐" prop="recommendStatus">
                <el-switch
                  v-model="newForm.recommendStatus"
                  inline-prompt
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
              <el-form-item
                label="兑换规则"
                prop="ruleId"
                :class="newForm.ruleId ? '!mb-0' : ''"
              >
                <div class="flex flex-col">
                  <el-select
                    v-model="newForm.ruleId"
                    clearable
                    placeholder="请选择"
                    class="!w-[300px]"
                  >
                    <el-option
                      v-for="item in props.selectData.ruleList"
                      :key="item.id"
                      :label="item.ruleName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    v-if="newForm.ruleId"
                    style="margin: 5px 0; line-height: 22px"
                  >
                    {{
                      props.selectData.ruleList.find(
                        v => v.id == newForm.ruleId
                      ).des || "--"
                    }}
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="陈列建议" prop="advise">
                <el-input
                  v-model="newForm.advise"
                  class="!w-[500px]"
                  clearable
                  type="textarea"
                  :rows="6"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="陈列推荐" prop="recommendImageJson">
                <fileUpload
                  ref="fileUploadRef"
                  v-model="newForm.recommendImageJson"
                  :fileType="['jpg', 'jpeg', 'png']"
                  :limit="15"
                  :maxSize="2"
                  tips="第一张图片为主图，建议尺寸：600*600，大小不超过2M，建议格式png、jpeg、jpg"
                />
              </el-form-item>
            </template>

            <el-form-item label="备注" prop="des">
              <el-input
                v-model="newForm.des"
                class="!w-[500px]"
                clearable
                type="textarea"
                :rows="6"
                placeholder="请输入"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 商品规格 -->
      <div id="rule" class="base-item">
        <div class="b-title">商品规格</div>
        <div class="b-content border">
          <pure-table
            row-key="tableId"
            align-whole="center"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            :data="goodsSpecList"
            :columns="ruleColumns"
          >
            <template #inputBraCode="{ row }">
              <div>
                <div
                  v-for="(item, index) in row.inputBraCodeList"
                  :key="index"
                  class="flex items-center"
                  :class="
                    index == row.inputBraCodeList.length - 1 ? '' : 'mb-[15px]'
                  "
                >
                  <el-input
                    v-model="item.code"
                    class="mr-[10px] flex-1"
                    clearable
                    placeholder="请输入"
                  />
                  <IconifyIconOffline
                    v-if="index != 0"
                    class="text-red-500 cursor-pointer mr-[8px]"
                    :icon="Delete"
                    @click="row.inputBraCodeList.splice(index, 1)"
                  />
                  <IconifyIconOffline
                    class="cursor-pointer"
                    :icon="AddFill"
                    @click="row.inputBraCodeList.push({ code: '' })"
                  />
                </div>
              </div>
            </template>
            <template #append>
              <el-button
                plain
                class="!block !m-auto !my-4"
                :icon="useRenderIcon(AddFill)"
                @click="ruleTableAdd"
              >
                添加规格
              </el-button>
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                @click="changBrandGoods(row)"
                >关联品牌</el-button
              >
              <el-button
                class="reset-margin !ml-[5px]"
                link
                type="danger"
                :icon="useRenderIcon(Delete)"
                @click="ruleTableDel(row)"
              />
            </template>
          </pure-table>
        </div>
      </div>

      <!-- 关联品牌  -->
      <div v-show="goodsSpecList.length <= 0" id="brand" class="base-item">
        <div class="b-title">关联品牌</div>
        <div class="b-content border flex">
          <SetBrandPrice
            ref="brandPriceRef"
            :brandPriceList="masterBrandList"
          />
        </div>
      </div>

      <!-- 兑换运费规则 -->
      <div v-if="newForm.goodsType == 2" class="base-item">
        <div class="b-title">兑换运费规则</div>
        <div class="b-content border">
          <pure-table
            row-key="id"
            align-whole="center"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            :data="newForm.goodsExchangeFareRuleList"
            :columns="feeColumns"
          >
            <template #append>
              <el-button
                plain
                class="!block !m-auto !my-4"
                :icon="useRenderIcon(AddFill)"
                @click="feeTableAdd"
              >
                添加省份
              </el-button>
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="danger"
                :icon="useRenderIcon(Delete)"
                @click="feeTableDel(row)"
              />
            </template>
          </pure-table>
        </div>
      </div>

      <!-- 商品详情 -->
      <div id="detail" class="base-item">
        <div class="b-title">商品详情</div>
        <div class="b-content border">
          <div class="wangeditor">
            <WangEditor v-model="newForm.goodsDetail" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(.g-step .el-step) {
  cursor: pointer;
}
:deep(.g-step .el-step__title.is-process) {
  color: #a8abb2;
}
:deep(.g-step .el-step__head.is-process) {
  color: #a8abb2;
}
.goods-box {
  display: flex;
  height: 68vh;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  .goods-step {
    width: 100px;
  }
  .goods-base {
    flex: 1;
    height: 100%;
    overflow: auto;
    padding: 0 25px 10px 10px;
  }
  .base-item {
    margin-bottom: 35px;
    .b-title {
      font-size: 16px;
      font-weight: bold;
    }
    .b-content {
      margin: 15px 0 0 40px;
    }
    .b-content.border {
      padding: 10px;
      border: 1px solid #efefef;
      border-radius: 8px;
    }
  }
}
</style>
